<template>
  <div class="timeData">
    <div>
      <div class="years">{{ time }}</div>
      <div class="week">{{ week }}</div>
    </div>
    <div class="hourMinute">{{ hourMinute }}</div>
  </div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
const time = ref() // 年月日
const hourMinute = ref() // 时分
const week = ref() // 星期

// 实时时间
const realTime = () => {
  time.value = dayjs().format('YYYY-MM-DD')
  hourMinute.value = dayjs().format('HH:mm')
  const date = dayjs().day()
  const weekData = ['日', '一', '二', '三', '四', '五', '六']
  week.value = '星期' + weekData[date]
}
// setInterval(realTime, 5000)
// setTimeout(() => {scroll()}, 1000)

onMounted(async () => {
  realTime()
})
</script>
<style lang="scss" scoped>
.timeData {
  display: flex;
  color: #d4fffb;
  margin-right: 10px;
  flex-direction: row-reverse;

  .hourMinute {
    font-size: 30px;
    text-align: center;
    margin-right: 10px;
  }

  .years {
    font-size: 16px;
  }

  .week {
    font-size: 16px;
    text-align: center;
  }
}
</style>
